블로그 릴레이 - Amplify Gen2 + React 인증 기능 까지 심플 구축해 보기

안녕하세요 생산지원 그룹 리테일 어플리케이션부의 김승연입니다. 본 블로그는 당사의 한국어 블로그 릴레이의 다섯 번째 블로그입니다. 이번 블로그의 주제는 「Amplify Gen2 + React 인증 기능까지 심플 구축해 보기」 입니다.

#한국어블로그

#AWS Amplify

Seungyeon Kim

2024.07.16

안녕하세요 생산지원 그룹 리테일 어플리케이션부의 김승연입니다.

본 블로그는 당사의 한국어 블로그 릴레이의 다섯 번째 블로그입니다.
이번 블로그의 주제는 「Amplify Gen2 + React 인증 기능까지 심플 구축해 보기」 입니다.

Frontend 리소스 추가

가장 먼저 Frontend 리소스를 추가 후 호스팅 합니다.

npm create vite@latest [project-name] -- --template react-ts

다음으로 Amplify에 react project를 호스팅 합니다.
방법은 공식 도큐먼트를 따라 해주세요.

Backend 리소스 추가

호스팅에 성공했다면 다음으로 Backend 리소스를 추가합니다.

npm create amplify@latest

다음으로 아래의 커맨드를 이용해 Backend 리소스를 생성해줍니다.

npx ampx sandbox

혹시 프로필 설정이 필요하다면 awsume를 이용해 간단하게 설정할 수 있습니다.
MFA 을 이용하고 있는 경우에도 에러 회피가 가능하기 때문에 추천드립니다.
상세한 내용은 Amplify Gen2 CLI에서 MFA 관련 에러 회피방법을 참고해 주세요.

awsume [profile-name]

여기까지 왔다면 초기 기반은 구축이 완료되었습니다.

인증 기능 구현

마지막으로 인증 기능을 빠르게 구현해 보겠습니다.
구현을 빠르게 하기 위해서 아래의 라이브러리를 추가로 설치 후 App.tsx에 아래의 코드를 카피해 주세요.

npm install @aws-amplify/ui-react

import { Authenticator } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';
import config from '../amplify_outputs.json'; // npx ampx sandbox 실행후 자동으로 생성됩니다.
import '@aws-amplify/ui-react/styles.css';

Amplify.configure(config)

function App() {

  return (
    <Authenticator>
      {({ signOut, user }) => (
        <div>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </div>
      )}
    </Authenticator>
  )
}